﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="web.Login" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <link href="css/main.css" rel="Stylesheet" type="text/css" />
    <style>
            
        body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}

        .sub { padding-left:100px;}
        .sub input { margin-right:10px; }
        .formtips{width: 200px;margin:2px;padding:2px; display:block;}
        .onError
        {
        	background-color:#FFE0E9;
            background-image:url(../images/reg7.png);
            background-repeat:no-repeat;
            background-position:5px 4px;
           
	        padding:5px 5px 2px 30px; border:#b6b6c6 solid 1px; font-size:13px;
	        width:167px;
        }
        .onSuccess{
            background-color:#E9FBEB;
	        background-image:url(../images/reg8.png);
            background-repeat:no-repeat;
            background-position:5px 4px;
           
	        padding:5px 5px 2px 30px; border:#b6b6c6 solid 1px; font-size:13px; width:167px;
        }
        .high{
            color:red;
        }
        
        .loginDIV
        {
        	margin-left:auto; margin-right:auto; border:#cc0000 solid 1px; top:50%; position:relative; margin-top:-100px; width:600px; background:#f1f8f8;
        }
        .loginDIV ul
        {
        	margin:0px; padding:0px;  width:550px;
        }
        .loginDIV ul li
        {
        	margin:0px;padding:8px; padding-left:30px; float:left; list-style:none; width:400px;
        }
        #SuccessDIV{
            display:none;
        }
        #ErrorDiv
        {
        	display:none;
        }
        
        .slabel
        {
            width:100px;
            display: -moz-inline-box;
            line-height: 1.8;
            display: inline-block;
            text-align:right;
        }
        /* 出错样式 */
        input.error, textarea.error
        {
            border: solid 1px #CD0A0A;
        }
        label.error
        {
            color:#CD0A0A;
            margin-left:5px;
        }
        /* 深红色文字 */
        .textred
        {
            color:#CD0A0A;
        }

    </style>
    <script src="javascript/jquery-1.7.js" type="text/javascript"></script>
    <script src="javascript/jquery.validate.js" type="text/javascript"></script>
    <script type="text/javascript">      
       $(function(){
    		$('form :input').blur(function(){
    		    $('form :input').css("background","#ffffff");
    		    $(this).css("background","#fcffd6");
    		   
                     
                  
    		});
		        $("form :input.required").each(function(){
			        var $required = $("<strong class='high'> *</strong>"); 
			        $(this).parent().append($required); 
		        });
		        
                 
                
                checkUserName();
                checkPassWord();
		         $('#res').click(function(){
				        $(".formtips").remove(); 
		         });
        });
        
        function checkPassWord(){
            $('form :input').blur(function(){
	        $("#ErrorDiv").hide(); 
		    $('#SuccessDIV').hide();   
			     var $parent = $(this).parent();			   
			     if( $(this).is('#PassWord') ){
				    //if( this.value=="" || ( this.value!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) ) ){
				    if( this.value=="" || this.value.length < 5 ){
				        $("#nameTip").show();        
                          var errorMsg = '密码输入错误，请重试.';
					      //$parent.append('<span class="formtips onError">'+errorMsg+'</span>');					      
					      $("#nameTip").html('<span class="formtips onError">'+errorMsg+'</span>');	
					     
				    }else{
                          var okMsg = '密码输入正确..';
                          $("#nameTip").html('<span class="formtips onSuccess">'+okMsg+'</span>');	                         		 
				    }
                    
			     }
		    }).keyup(function(){
		       $(this).triggerHandler("blur");
		    }).focus(function(){
	  	       $(this).triggerHandler("blur");
		    });
        
        }
        
        function checkUserName(){        
        
            $('form :input').blur(function(){
	        $("#ErrorDiv").hide(); 
		    $('#SuccessDIV').hide();   
			 var $parent = $(this).parent();
			 $parent.find(".formtips").remove();
		
			 if( $(this).is('#UserName') ){
			    $("#nameTip").show();        
				if( this.value=="" || this.value.length < 3 ){
				    var errorMsg = '用户名不能为空且长度不能小于3.';
                    $("#nameTip").html('<span class="formtips onError">'+errorMsg+'</span>');                      
				}else{
				    var okMsg = '用户名输入正确.';
				    $("#nameTip").html('<span class="formtips onSuccess">'+okMsg+'</span>');	              	
				}
			 }
			 //
			
		    }).keyup(function(){
		       $(this).triggerHandler("blur");
		    }).focus(function(){
	  	       $(this).triggerHandler("blur");
		    });
        }
        function checkValidation(){
		        $("#ErrorDiv").hide(); 
		        $('#SuccessDIV').hide();              
				$("form :input.required").trigger('blur');
				var numError = $('form .onError').length;			
				if(numError){                    
                     $("#nameTip").html('<span class="formtips onError">请输入正确的用户或密码！</span>');      	    
					return false;
				}else{
				    var _UserName = $('#UserName').val();
                    var _PassWord = $('#PassWord').val();                   
                    var ajaxMethodName = "checkUserLogin";
				    $.ajax({
                        type: "get",
                        url: "/ajax/ajaxhandler.ashx",
                        data: {
                            methodname: ajaxMethodName,
                            userName: _UserName,
                            passWord: _PassWord                                     
                        },
                        dataType: 'text',
                        success: function(response) {
                            if (response == "{vali:\"1\"}") {    
                                var okMsg = "登录成功!!!!!";
                                $("#nameTip").html('<span class="formtips onSuccess">'+okMsg+'</span>');      
                                $("#Button1").click();                          
                                return false;
                            } else {
                                 var errorMsg = "登录失败,请重试用户名或者密码!!!!!";
                                $("#nameTip").html('<span class="formtips onError">'+errorMsg+'</span>'); 
                                 return false;
                            }                            
                        },
                        error: function(error) {      
                            alert(error);                    
                            return;
                        }
                    });
				}
				
		 }
    </script>
</head>
<body>
    <form id="LoginForm" runat="server">
    <div style="background:#eeeeee; width:100%; height:100%; position:absolute; margin-left:auto; margin-right:auto;  vertical-align:middle;">
        <div  class="loginDIV">
            <ul>
                <li style="width:70px;">User Name:</li>
                <li><asp:TextBox ID="UserName" CssClass="required txtBg" runat="server"></asp:TextBox></li>           
                <li style="width:70px;">Password:</li>
                <li><asp:TextBox ID="PassWord" runat="server" CssClass="required txtBg"></asp:TextBox></li>
            </ul>
            <ul>
                <li style="width:70px;"></li>
                <li> 
                    <input type="button" onclick="checkValidation()" value="aaaa"  />
                        <asp:Button ID="Button1" runat="server" 
                            Text="Log In" onclick="Button1_Click" style="display:none;" /></li>
            </ul>
            <ul >
                <li style="width:70px;"></li>
                <li id="nameTip" class="formtips"></li>
            </ul>
            <ul id="SuccessDIV">
                <li style="width:70px;"></li>
                <li>登录成功！！！</li>
            </ul>
            <ul id="ErrorDiv">
                <li style="width:70px;"></li>
                <li>您输入的用户名或者密码错误！！请重试。。</li>
            </ul>
        </div>
        
    </div>
    </form>
</body>
</html>